<template>
	<!-- 导航栏 -->
	<view class="nav-box" :style="{'height':navHeight+'px'}">
		<view :class="{'nav-fixed': fixed}" :style="{'height':navHeight+'px','background':bgColor}">
			<!-- 状态栏 -->
			<view class="status_bar" :style="{'height':statusBarHeight+'px'}"></view>
			<!-- 胶囊位置信息(导航内容) -->
			<view class="nav-main" :style="{'height': navBarHeight + 'px','line-height': navBarHeight + 'px'}">
				<view v-if="backIcon" :class="{'flex-start': backIcon}">
					<!-- <u-navbar :title="title" :leftText="leftText" :autoBack="true" :leftIconSize="20">
					</u-navbar> -->
					<view class="navigation-bar">
						<view class="iconfont">
							<u-icon name="arrow-left" :size="18" @click="gotoBack"></u-icon>
						</view>
						<view class="leftText" v-if="leftText != ''">
							{{ leftText }}
						</view>
						<view class="title"  v-if="title != '' ">
							{{ title }}
						</view>
					</view>
				</view>
				<view v-else>
					<text class="nav-main-title">{{title}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "nav-bar",
		props: {
			// 导航栏背景色相关
			bgColor: {
				type: String,
				default: "",
				require: false,
			},
			// 控制回退图标
			backIcon: {
				type: Boolean,
				default: true,
				require: false,
			},
			// 标题
			title: {
				type: String,
				default: "",
				require: false,
			},
			// 左边文字
			leftText: {
				type: String,
				default: "",
				require: false,
			},
			//是否固定
			fixed: {
				type: Boolean,
				default: true,
				require: false,
			},
		},
		data() {
			return {
				navBarHeight: this.$store.state.navbar.navBarHeight,
				navHeight: this.$store.state.navbar.navHeight,
			};
		},
		computed: {
			...mapState('navbar', ['statusBarHeight'])
		},
		mounted() {
			// #ifdef H5
			if (this.title == '' && this.leftText == '') {
				this.navBarHeight = 0
				this.navHeight = this.navBarHeight + this.navbar.statusBarHeight
			}
			// #endif

			// let windowWidth = uni.getSystemInfoSync().windowWidth;
			//console.log("可视化高度：", windowWidth)
		},
		methods: {
			gotoBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// px转换成rpx
			rpxTopx(px) {
				let deviceWidth = uni.getSystemInfoSync().windowWidth
				let rpx = (750 / deviceWidth) * Number(px)
				return Math.floor(rpx)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.nav-box {}

	.nav-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100px;
		z-index: 999;
	}

	.status_bar {
		width: 100%;
	}

	.nav-main {
		width: 100%;
		text-align: center;
		// padding: 0 40rpx 0 20rpx;
	}

	.nav-main-title {
		color: #303133;
		font-size: 26rpx;
		font-weight: bold;
	}

	.flex-start {
		width: 100%;
	}

	.navigation-bar {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-top: 10px;

		.iconfont {
			padding-left: 10px;
		}

		.leftText {
			height: 20px;
			margin-left: 3px;
			font-size: 18px;
			color: #303133;
			line-height: 20px;
		}
		.title{
			flex: 1;
			text-align: center;
			height: 20px;
			font-size: 18px;
			color: #303133;
			line-height: 20px;
			font-weight: bold;
		}
	}

	::v-deep .u-navbar__content__left__text {
		//font-size: 32rpx;
	}
</style>